<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            html,body{
                height: 100vh;
                margin:0px;
            }
            main{
                height:100vh;
                display: grid;
                grid-template-rows: 100px auto 80px;
                grid-template-columns: 200px auto;
                grid-template-areas: "header header"
                                    "nav section"
                                    "footer footer"
            }
            #header,#article,#nav,#section,#footer{
                border:1px #ccc solid;
            }
            #header{
                grid-area:header;
            }
            #article{grid-area:article}
            #nav{grid-area:nav}
            #section{grid-area:section}
            #footer{grid-area:footer}
        </style>
    </head>
    <body>
        <main>
            <header id="header">
                <h1 style="text-indent: -9999px;">NNBlog</h1>
            </header>
            <nav id="nav">menu</nav>
            <section id="section">main page</section>
            <footer id="footer">info</footer>
        </main>
    </body>
    </html>